<!DOCTYPE html>
<!-- saved from url=(0032)http://v3.bootcss.com/customize/ -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更迅速、简单。">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="author" content="王赛 &lt;wangsai@bootcss.com&gt;">

<title>
  
    定制并下载 Bootstrap · Bootstrap 中文文档
  
</title>

<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">

<link href="./css/patch.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="./css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->
<link rel="apple-touch-icon" href="http://v3.bootcss.com/apple-touch-icon.png">
<link rel="icon" href="http://v3.bootcss.com/favicon.ico">
<script>
  var _hmt = _hmt || [];
</script>
  </head>
  <body>
    <a id="skippy" class="sr-only sr-only-focusable" href="http://v3.bootcss.com/customize/#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>

    <!-- Docs master nav -->
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="http://v3.bootcss.com/" class="navbar-brand">Bootstrap</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="起步 · Bootstrap 中文文档.htm">起步</a>
        </li>
        <li class="active">
          <a href="全局 CSS 样式 · Bootstrap 中文文档.htm">全局 CSS 样式</a>
        </li>
        <li>
          <a href="组件 · Bootstrap 中文文档.htm">组件</a>
        </li>
        <li>
          <a href="JavaScript 插件 · Bootstrap 中文文档.htm">JavaScript 插件</a>
        </li>
        <li>
          <a href="定制并下载 Bootstrap · Bootstrap 中文文档.htm">定制</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="http://job.bootcss.com/" onclick="_hmt.push([&#39;_trackEvent&#39;, &#39;docv3-navbar&#39;, &#39;click&#39;, &#39;doc-home-navbar-job&#39;])" target="_blank">高薪工作</a></li>
        <li><a href="http://expo.bootcss.com/" onclick="_hmt.push([&#39;_trackEvent&#39;, &#39;docv3-navbar&#39;, &#39;click&#39;, &#39;doc-home-navbar-expo&#39;])" target="_blank">优站精选</a></li>
      </ul>
    </nav>
  </div>
</header>


    <!-- Docs page layout -->
    <div class="bs-docs-header" id="content">
      <div class="container">
        <h1>定制并下载 Bootstrap</h1>
        <p>通过自定义 Bootstrap 组件、Less 变量和 jQuery 插件，定制一份属于你自己的 Bootstrap 版本吧。</p>
      </div>
    </div>

    <div class="container bs-docs-container">

      <div class="row">
        <div class="col-md-9" role="main">
          <!-- less.js isn't IE8-compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
  So we use a conditional comment instead to inform folks about the lack of IE8 support.
-->
<!--[if lt IE 9]>
  <style>
    .bs-customizer,
    .bs-customizer-import,
    .bs-docs-sidebar {
      display: none;
    }
  </style>
  <div class="alert alert-danger">
    <strong>The Bootstrap Customizer does not support IE9 and below.</strong><br>
    Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
  </div>
<![endif]-->

<!-- Customizer form -->

<div id="defaults-change-alert" class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  <strong>Heads up!</strong> The default value for <code>@brand-primary</code> has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading.
</div>

<div class="bs-docs-section bs-customizer-import">
  <div id="import-drop-target" class="bs-dropzone">
    <div class="import-header">
      <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
    </div>
    <p class="lead">Have an existing configuration? Upload your <code>config.json</code> to import it.</p>
    <p>Drag and drop here, or <label id="import-manual-trigger" class="btn-link">manually upload<input type="file" id="import-file-select" class="hidden"></label>.</p>
    <hr>
    <p><strong>Don't have one?</strong> That's okay—just start customizing the fields below.</p>
  </div>
</div>

<form class="bs-customizer">
  <div class="bs-docs-section" id="less-section">
    <button class="btn btn-default toggle" type="button">全选/全部取消</button>
    <h1 id="less" class="page-header">Less 文件</h1>

    <p class="lead">选择将哪些 Less 文件编译到你自己的定制 Bootstrap 版本中。不确定每个文件的用途吗？请先通读此文档中的<a href="http://v3.bootcss.com/css/">全局 CSS 样式</a>和<a href="http://v3.bootcss.com/components/">组件</a>章节。</p>

    <div class="row">
      <div class="col-xs-6 col-sm-4">
        <h3>通用 CSS</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="print.less">
            Print media styles
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="type.less">
            Typography
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="code.less">
            Code
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="grid.less">
            Grid system
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="tables.less">
            Tables
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="forms.less" data-dependents="navbar.less,input-groups.less">
            Forms
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="buttons.less" data-dependents="button-groups.less">
            Buttons
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="responsive-utilities.less">
            Responsive utilities
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->

      <div class="col-xs-6 col-sm-4">
        <h3>组件</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="glyphicons.less">
            Glyphicons
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="button-groups.less" data-dependencies="buttons.less">
            Button groups
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="input-groups.less" data-dependencies="forms.less">
            Input groups
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="navs.less" data-dependents="navbar.less">
            Navs
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="navbar.less" data-dependencies="forms.less,navs.less">
            Navbar
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="breadcrumbs.less">
            Breadcrumbs
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="pagination.less">
            Pagination
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="pager.less">
            Pager
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="labels.less">
            Labels
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="badges.less">
            Badges
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="jumbotron.less">
            Jumbotron
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="thumbnails.less">
            Thumbnails
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="alerts.less">
            Alerts
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="progress-bars.less">
            Progress bars
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="media.less">
            Media items
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="list-group.less">
            List groups
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="panels.less">
            Panels
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="responsive-embed.less">
            Responsive embed
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="wells.less">
            Wells
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="close.less">
            Close icon
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->

      <div class="col-xs-6 col-sm-4">
        <h3>JavaScript 插件</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="component-animations.less">
            Component animations (for JS)
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="dropdowns.less">
            Dropdowns
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="tooltip.less">
            Tooltips
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="popovers.less">
            Popovers
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="modals.less">
            Modals
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="carousel.less">
            Carousel
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->
    </div><!-- /.row -->
  </div>



  <div class="bs-docs-section" id="plugin-section">
    <button class="btn btn-default toggle" type="button">全选/全部取消</button>
    <h1 id="plugins" class="page-header">jQuery 插件</h1>

    <p class="lead">选择将那些 jQuery 插件包含到你的定制版本中。不确定他们的用途吗？请通读此文档中的 <a href="http://v3.bootcss.com/javascript/">JavaScript 插件</a>章节。</p>
    <div class="row">
      <div class="col-lg-6">
        <h4>Linked to components</h4>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="alert.js">
            Alert dismissal
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="button.js">
            Advanced buttons
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="carousel.js">
            Carousel functionality
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="dropdown.js">
            Dropdowns
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="modal.js">
            Modals
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="tooltip.js">
            Tooltips
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="popover.js" data-dependencies="tooltip.js">
            Popovers <small>(requires Tooltips)</small>
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="tab.js">
            Togglable tabs
          </label>
        </div>
      </div>
      <div class="col-lg-6">
        <h4>Magic</h4>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="affix.js">
            Affix
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="collapse.js">
            Collapse
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="scrollspy.js">
            Scrollspy
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked="" value="transition.js">
            Transitions <small>(required for any kind of animation)</small>
          </label>
        </div>
      </div>
    </div>

    <div class="bs-callout bs-callout-info">
      <h4>生成的两个文件</h4>
      <p>所有选中的插件都将会编译为一份是和阅读的版本 <code>bootstrap.js</code> 和一份压缩版本 <code>bootstrap.min.js</code>。我们建议将压缩版本用于生产环境。</p>
    </div>

    <div class="bs-callout bs-callout-danger">
      <h4>依赖 jQuery</h4>
      <p>所有插件都依赖最新版本的 <a href="http://jquery.com/" target="_blank">jQuery</a>，因此，必须首先将 jQuery 引入页面。</p>
    </div>
  </div>



  <div class="bs-docs-section" id="less-variables-section">
    <button class="btn btn-default toggle" type="button">重置为默认值</button>
    <h1 id="less-variables" class="page-header">Less 变量</h1>

    <p class="lead">通过 Less 变量可以自定义颜色、尺寸等，最终将会反映到你所下载的 CSS 样式表文件中。</p>
    
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
<h2 id="colors">Colors</h2>
<p>Gray and brand colors for use across Bootstrap.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@gray-base">@gray-base</label>
    <input id="input-@gray-base" type="text" value="#000" data-var="@gray-base" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@gray-darker">@gray-darker</label>
    <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@gray-dark">@gray-dark</label>
    <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@gray">@gray</label>
    <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@gray-light">@gray-light</label>
    <input id="input-@gray-light" type="text" value="lighten(@gray-base, 46.7%)" data-var="@gray-light" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@gray-lighter">@gray-lighter</label>
    <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@brand-primary">@brand-primary</label>
    <input id="input-@brand-primary" type="text" value="darken(#428bca, 6.5%)" data-var="@brand-primary" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@brand-success">@brand-success</label>
    <input id="input-@brand-success" type="text" value="#5cb85c" data-var="@brand-success" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@brand-info">@brand-info</label>
    <input id="input-@brand-info" type="text" value="#5bc0de" data-var="@brand-info" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@brand-warning">@brand-warning</label>
    <input id="input-@brand-warning" type="text" value="#f0ad4e" data-var="@brand-warning" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@brand-danger">@brand-danger</label>
    <input id="input-@brand-danger" type="text" value="#d9534f" data-var="@brand-danger" class="form-control">
  </div>
</div>
<h2 id="scaffolding">Scaffolding</h2>
<p>Settings for some of the most global styles.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@body-bg">@body-bg</label>
    <input id="input-@body-bg" type="text" aria-describedby="help-block-@body-bg" value="#fff" data-var="@body-bg" class="form-control">
    <p id="help-block-@body-bg" class="help-block">Background color for <code>&lt;body&gt;</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@text-color">@text-color</label>
    <input id="input-@text-color" type="text" aria-describedby="help-block-@text-color" value="@gray-dark" data-var="@text-color" class="form-control">
    <p id="help-block-@text-color" class="help-block">Global text color on <code>&lt;body&gt;</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@link-color">@link-color</label>
    <input id="input-@link-color" type="text" aria-describedby="help-block-@link-color" value="@brand-primary" data-var="@link-color" class="form-control">
    <p id="help-block-@link-color" class="help-block">Global textual link color.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@link-hover-color">@link-hover-color</label>
    <input id="input-@link-hover-color" type="text" aria-describedby="help-block-@link-hover-color" value="darken(@link-color, 15%)" data-var="@link-hover-color" class="form-control">
    <p id="help-block-@link-hover-color" class="help-block">Link hover color set via <code>darken()</code> function.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@link-hover-decoration">@link-hover-decoration</label>
    <input id="input-@link-hover-decoration" type="text" aria-describedby="help-block-@link-hover-decoration" value="underline" data-var="@link-hover-decoration" class="form-control">
    <p id="help-block-@link-hover-decoration" class="help-block">Link hover decoration.</p>
  </div>
</div>
<h2 id="typography">Typography</h2>
<p>Font, line-height, and color for body text, headings, and more.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@font-family-sans-serif">@font-family-sans-serif</label>
    <input id="input-@font-family-sans-serif" type="text" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-family-serif">@font-family-serif</label>
    <input id="input-@font-family-serif" type="text" value="Georgia, &quot;Times New Roman&quot;, Times, serif" data-var="@font-family-serif" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-family-monospace">@font-family-monospace</label>
    <input id="input-@font-family-monospace" type="text" aria-describedby="help-block-@font-family-monospace" value="Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace" data-var="@font-family-monospace" class="form-control">
    <p id="help-block-@font-family-monospace" class="help-block">Default monospace fonts for <code>&lt;code&gt;</code>, <code>&lt;kbd&gt;</code>, and <code>&lt;pre&gt;</code>.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@font-family-base">@font-family-base</label>
    <input id="input-@font-family-base" type="text" value="@font-family-sans-serif" data-var="@font-family-base" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-base">@font-size-base</label>
    <input id="input-@font-size-base" type="text" value="14px" data-var="@font-size-base" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-large">@font-size-large</label>
    <input id="input-@font-size-large" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-large" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@font-size-small">@font-size-small</label>
    <input id="input-@font-size-small" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-small" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-h1">@font-size-h1</label>
    <input id="input-@font-size-h1" type="text" value="floor((@font-size-base * 2.6))" data-var="@font-size-h1" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-h2">@font-size-h2</label>
    <input id="input-@font-size-h2" type="text" value="floor((@font-size-base * 2.15))" data-var="@font-size-h2" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@font-size-h3">@font-size-h3</label>
    <input id="input-@font-size-h3" type="text" value="ceil((@font-size-base * 1.7))" data-var="@font-size-h3" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-h4">@font-size-h4</label>
    <input id="input-@font-size-h4" type="text" value="ceil((@font-size-base * 1.25))" data-var="@font-size-h4" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@font-size-h5">@font-size-h5</label>
    <input id="input-@font-size-h5" type="text" value="@font-size-base" data-var="@font-size-h5" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@font-size-h6">@font-size-h6</label>
    <input id="input-@font-size-h6" type="text" value="ceil((@font-size-base * 0.85))" data-var="@font-size-h6" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@line-height-base">@line-height-base</label>
    <input id="input-@line-height-base" type="text" aria-describedby="help-block-@line-height-base" value="1.428571429" data-var="@line-height-base" class="form-control">
    <p id="help-block-@line-height-base" class="help-block">Unit-less <code>line-height</code> for use in components like buttons.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@line-height-computed">@line-height-computed</label>
    <input id="input-@line-height-computed" type="text" aria-describedby="help-block-@line-height-computed" value="floor((@font-size-base * @line-height-base))" data-var="@line-height-computed" class="form-control">
    <p id="help-block-@line-height-computed" class="help-block">Computed "line-height" (<code>font-size</code> * <code>line-height</code>) for use with <code>margin</code>, <code>padding</code>, etc.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@headings-font-family">@headings-font-family</label>
    <input id="input-@headings-font-family" type="text" aria-describedby="help-block-@headings-font-family" value="inherit" data-var="@headings-font-family" class="form-control">
    <p id="help-block-@headings-font-family" class="help-block">By default, this inherits from the <code>&lt;body&gt;</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@headings-font-weight">@headings-font-weight</label>
    <input id="input-@headings-font-weight" type="text" value="500" data-var="@headings-font-weight" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@headings-line-height">@headings-line-height</label>
    <input id="input-@headings-line-height" type="text" value="1.1" data-var="@headings-line-height" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@headings-color">@headings-color</label>
    <input id="input-@headings-color" type="text" value="inherit" data-var="@headings-color" class="form-control">
  </div>
</div>
<h2 id="iconography">Iconography</h2>
<p>Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@icon-font-path">@icon-font-path</label>
    <input id="input-@icon-font-path" type="text" aria-describedby="help-block-@icon-font-path" value="&quot;../fonts/&quot;" data-var="@icon-font-path" class="form-control">
    <p id="help-block-@icon-font-path" class="help-block">Load fonts from this directory.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@icon-font-name">@icon-font-name</label>
    <input id="input-@icon-font-name" type="text" aria-describedby="help-block-@icon-font-name" value="&quot;glyphicons-halflings-regular&quot;" data-var="@icon-font-name" class="form-control">
    <p id="help-block-@icon-font-name" class="help-block">File name for all font files.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@icon-font-svg-id">@icon-font-svg-id</label>
    <input id="input-@icon-font-svg-id" type="text" aria-describedby="help-block-@icon-font-svg-id" value="&quot;glyphicons_halflingsregular&quot;" data-var="@icon-font-svg-id" class="form-control">
    <p id="help-block-@icon-font-svg-id" class="help-block">Element ID within SVG icon file.</p>
  </div>
</div>
<h2 id="components">Components</h2>
<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@padding-base-vertical">@padding-base-vertical</label>
    <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@padding-base-horizontal">@padding-base-horizontal</label>
    <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@padding-large-vertical">@padding-large-vertical</label>
    <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@padding-large-horizontal">@padding-large-horizontal</label>
    <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@padding-small-vertical">@padding-small-vertical</label>
    <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@padding-small-horizontal">@padding-small-horizontal</label>
    <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@padding-xs-vertical">@padding-xs-vertical</label>
    <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label>
    <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@line-height-large">@line-height-large</label>
    <input id="input-@line-height-large" type="text" value="1.3333333" data-var="@line-height-large" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@line-height-small">@line-height-small</label>
    <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@border-radius-base">@border-radius-base</label>
    <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@border-radius-large">@border-radius-large</label>
    <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@border-radius-small">@border-radius-small</label>
    <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@component-active-color">@component-active-color</label>
    <input id="input-@component-active-color" type="text" aria-describedby="help-block-@component-active-color" value="#fff" data-var="@component-active-color" class="form-control">
    <p id="help-block-@component-active-color" class="help-block">Global color for active items (e.g., navs or dropdowns).</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@component-active-bg">@component-active-bg</label>
    <input id="input-@component-active-bg" type="text" aria-describedby="help-block-@component-active-bg" value="@brand-primary" data-var="@component-active-bg" class="form-control">
    <p id="help-block-@component-active-bg" class="help-block">Global background color for active items (e.g., navs or dropdowns).</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@caret-width-base">@caret-width-base</label>
    <input id="input-@caret-width-base" type="text" aria-describedby="help-block-@caret-width-base" value="4px" data-var="@caret-width-base" class="form-control">
    <p id="help-block-@caret-width-base" class="help-block">Width of the <code>border</code> for generating carets that indicator dropdowns.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@caret-width-large">@caret-width-large</label>
    <input id="input-@caret-width-large" type="text" aria-describedby="help-block-@caret-width-large" value="5px" data-var="@caret-width-large" class="form-control">
    <p id="help-block-@caret-width-large" class="help-block">Carets increase slightly in size for larger components.</p>
  </div>
</div>
<h2 id="tables">Tables</h2>
<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@table-cell-padding">@table-cell-padding</label>
    <input id="input-@table-cell-padding" type="text" aria-describedby="help-block-@table-cell-padding" value="8px" data-var="@table-cell-padding" class="form-control">
    <p id="help-block-@table-cell-padding" class="help-block">Padding for <code>&lt;th&gt;</code>s and <code>&lt;td&gt;</code>s.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@table-condensed-cell-padding">@table-condensed-cell-padding</label>
    <input id="input-@table-condensed-cell-padding" type="text" aria-describedby="help-block-@table-condensed-cell-padding" value="5px" data-var="@table-condensed-cell-padding" class="form-control">
    <p id="help-block-@table-condensed-cell-padding" class="help-block">Padding for cells in <code>.table-condensed</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@table-bg">@table-bg</label>
    <input id="input-@table-bg" type="text" aria-describedby="help-block-@table-bg" value="transparent" data-var="@table-bg" class="form-control">
    <p id="help-block-@table-bg" class="help-block">Default background color used for all tables.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@table-bg-accent">@table-bg-accent</label>
    <input id="input-@table-bg-accent" type="text" aria-describedby="help-block-@table-bg-accent" value="#f9f9f9" data-var="@table-bg-accent" class="form-control">
    <p id="help-block-@table-bg-accent" class="help-block">Background color used for <code>.table-striped</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@table-bg-hover">@table-bg-hover</label>
    <input id="input-@table-bg-hover" type="text" aria-describedby="help-block-@table-bg-hover" value="#f5f5f5" data-var="@table-bg-hover" class="form-control">
    <p id="help-block-@table-bg-hover" class="help-block">Background color used for <code>.table-hover</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@table-bg-active">@table-bg-active</label>
    <input id="input-@table-bg-active" type="text" value="@table-bg-hover" data-var="@table-bg-active" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@table-border-color">@table-border-color</label>
    <input id="input-@table-border-color" type="text" aria-describedby="help-block-@table-border-color" value="#ddd" data-var="@table-border-color" class="form-control">
    <p id="help-block-@table-border-color" class="help-block">Border color for table and cell borders.</p>
  </div>
</div>
<h2 id="buttons">Buttons</h2>
<p>For each of Bootstrap's buttons, define text, background and border color.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@btn-font-weight">@btn-font-weight</label>
    <input id="input-@btn-font-weight" type="text" value="normal" data-var="@btn-font-weight" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-default-color">@btn-default-color</label>
    <input id="input-@btn-default-color" type="text" value="#333" data-var="@btn-default-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-default-bg">@btn-default-bg</label>
    <input id="input-@btn-default-bg" type="text" value="#fff" data-var="@btn-default-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-default-border">@btn-default-border</label>
    <input id="input-@btn-default-border" type="text" value="#ccc" data-var="@btn-default-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-primary-color">@btn-primary-color</label>
    <input id="input-@btn-primary-color" type="text" value="#fff" data-var="@btn-primary-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-primary-bg">@btn-primary-bg</label>
    <input id="input-@btn-primary-bg" type="text" value="@brand-primary" data-var="@btn-primary-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-primary-border">@btn-primary-border</label>
    <input id="input-@btn-primary-border" type="text" value="darken(@btn-primary-bg, 5%)" data-var="@btn-primary-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-success-color">@btn-success-color</label>
    <input id="input-@btn-success-color" type="text" value="#fff" data-var="@btn-success-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-success-bg">@btn-success-bg</label>
    <input id="input-@btn-success-bg" type="text" value="@brand-success" data-var="@btn-success-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-success-border">@btn-success-border</label>
    <input id="input-@btn-success-border" type="text" value="darken(@btn-success-bg, 5%)" data-var="@btn-success-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-info-color">@btn-info-color</label>
    <input id="input-@btn-info-color" type="text" value="#fff" data-var="@btn-info-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-info-bg">@btn-info-bg</label>
    <input id="input-@btn-info-bg" type="text" value="@brand-info" data-var="@btn-info-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-info-border">@btn-info-border</label>
    <input id="input-@btn-info-border" type="text" value="darken(@btn-info-bg, 5%)" data-var="@btn-info-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-warning-color">@btn-warning-color</label>
    <input id="input-@btn-warning-color" type="text" value="#fff" data-var="@btn-warning-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-warning-bg">@btn-warning-bg</label>
    <input id="input-@btn-warning-bg" type="text" value="@brand-warning" data-var="@btn-warning-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-warning-border">@btn-warning-border</label>
    <input id="input-@btn-warning-border" type="text" value="darken(@btn-warning-bg, 5%)" data-var="@btn-warning-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-danger-color">@btn-danger-color</label>
    <input id="input-@btn-danger-color" type="text" value="#fff" data-var="@btn-danger-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-danger-bg">@btn-danger-bg</label>
    <input id="input-@btn-danger-bg" type="text" value="@brand-danger" data-var="@btn-danger-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@btn-danger-border">@btn-danger-border</label>
    <input id="input-@btn-danger-border" type="text" value="darken(@btn-danger-bg, 5%)" data-var="@btn-danger-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@btn-link-disabled-color">@btn-link-disabled-color</label>
    <input id="input-@btn-link-disabled-color" type="text" value="@gray-light" data-var="@btn-link-disabled-color" class="form-control">
  </div>
</div>
<h2 id="forms">Forms</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@input-bg">@input-bg</label>
    <input id="input-@input-bg" type="text" aria-describedby="help-block-@input-bg" value="#fff" data-var="@input-bg" class="form-control">
    <p id="help-block-@input-bg" class="help-block"><code>&lt;input&gt;</code> background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-bg-disabled">@input-bg-disabled</label>
    <input id="input-@input-bg-disabled" type="text" aria-describedby="help-block-@input-bg-disabled" value="@gray-lighter" data-var="@input-bg-disabled" class="form-control">
    <p id="help-block-@input-bg-disabled" class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-color">@input-color</label>
    <input id="input-@input-color" type="text" aria-describedby="help-block-@input-color" value="@gray" data-var="@input-color" class="form-control">
    <p id="help-block-@input-color" class="help-block">Text color for <code>&lt;input&gt;</code>s</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@input-border">@input-border</label>
    <input id="input-@input-border" type="text" aria-describedby="help-block-@input-border" value="#ccc" data-var="@input-border" class="form-control">
    <p id="help-block-@input-border" class="help-block"><code>&lt;input&gt;</code> border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-border-radius">@input-border-radius</label>
    <input id="input-@input-border-radius" type="text" aria-describedby="help-block-@input-border-radius" value="@border-radius-base" data-var="@input-border-radius" class="form-control">
    <p id="help-block-@input-border-radius" class="help-block">Default <code>.form-control</code> border radius</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-border-radius-large">@input-border-radius-large</label>
    <input id="input-@input-border-radius-large" type="text" aria-describedby="help-block-@input-border-radius-large" value="@border-radius-large" data-var="@input-border-radius-large" class="form-control">
    <p id="help-block-@input-border-radius-large" class="help-block">Large <code>.form-control</code> border radius</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@input-border-radius-small">@input-border-radius-small</label>
    <input id="input-@input-border-radius-small" type="text" aria-describedby="help-block-@input-border-radius-small" value="@border-radius-small" data-var="@input-border-radius-small" class="form-control">
    <p id="help-block-@input-border-radius-small" class="help-block">Small <code>.form-control</code> border radius</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-border-focus">@input-border-focus</label>
    <input id="input-@input-border-focus" type="text" aria-describedby="help-block-@input-border-focus" value="#66afe9" data-var="@input-border-focus" class="form-control">
    <p id="help-block-@input-border-focus" class="help-block">Border color for inputs on focus</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-color-placeholder">@input-color-placeholder</label>
    <input id="input-@input-color-placeholder" type="text" aria-describedby="help-block-@input-color-placeholder" value="#999" data-var="@input-color-placeholder" class="form-control">
    <p id="help-block-@input-color-placeholder" class="help-block">Placeholder text color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@input-height-base">@input-height-base</label>
    <input id="input-@input-height-base" type="text" aria-describedby="help-block-@input-height-base" value="(@line-height-computed + (@padding-base-vertical * 2) + 2)" data-var="@input-height-base" class="form-control">
    <p id="help-block-@input-height-base" class="help-block">Default <code>.form-control</code> height</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-height-large">@input-height-large</label>
    <input id="input-@input-height-large" type="text" aria-describedby="help-block-@input-height-large" value="(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2)" data-var="@input-height-large" class="form-control">
    <p id="help-block-@input-height-large" class="help-block">Large <code>.form-control</code> height</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@input-height-small">@input-height-small</label>
    <input id="input-@input-height-small" type="text" aria-describedby="help-block-@input-height-small" value="(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2)" data-var="@input-height-small" class="form-control">
    <p id="help-block-@input-height-small" class="help-block">Small <code>.form-control</code> height</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@legend-color">@legend-color</label>
    <input id="input-@legend-color" type="text" value="@gray-dark" data-var="@legend-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@legend-border-color">@legend-border-color</label>
    <input id="input-@legend-border-color" type="text" value="#e5e5e5" data-var="@legend-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@input-group-addon-bg">@input-group-addon-bg</label>
    <input id="input-@input-group-addon-bg" type="text" aria-describedby="help-block-@input-group-addon-bg" value="@gray-lighter" data-var="@input-group-addon-bg" class="form-control">
    <p id="help-block-@input-group-addon-bg" class="help-block">Background color for textual input addons</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@input-group-addon-border-color">@input-group-addon-border-color</label>
    <input id="input-@input-group-addon-border-color" type="text" aria-describedby="help-block-@input-group-addon-border-color" value="@input-border" data-var="@input-group-addon-border-color" class="form-control">
    <p id="help-block-@input-group-addon-border-color" class="help-block">Border color for textual input addons</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@cursor-disabled">@cursor-disabled</label>
    <input id="input-@cursor-disabled" type="text" aria-describedby="help-block-@cursor-disabled" value="not-allowed" data-var="@cursor-disabled" class="form-control">
    <p id="help-block-@cursor-disabled" class="help-block">Disabled cursor for form controls and buttons.</p>
  </div>
</div>
<h2 id="dropdowns">Dropdowns</h2>
<p>Dropdown menu container and contents.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@dropdown-bg">@dropdown-bg</label>
    <input id="input-@dropdown-bg" type="text" aria-describedby="help-block-@dropdown-bg" value="#fff" data-var="@dropdown-bg" class="form-control">
    <p id="help-block-@dropdown-bg" class="help-block">Background for the dropdown menu.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-border">@dropdown-border</label>
    <input id="input-@dropdown-border" type="text" aria-describedby="help-block-@dropdown-border" value="rgba(0,0,0,.15)" data-var="@dropdown-border" class="form-control">
    <p id="help-block-@dropdown-border" class="help-block">Dropdown menu <code>border-color</code>.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-fallback-border">@dropdown-fallback-border</label>
    <input id="input-@dropdown-fallback-border" type="text" aria-describedby="help-block-@dropdown-fallback-border" value="#ccc" data-var="@dropdown-fallback-border" class="form-control">
    <p id="help-block-@dropdown-fallback-border" class="help-block">Dropdown menu <code>border-color</code> <strong>for IE8</strong>.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@dropdown-divider-bg">@dropdown-divider-bg</label>
    <input id="input-@dropdown-divider-bg" type="text" aria-describedby="help-block-@dropdown-divider-bg" value="#e5e5e5" data-var="@dropdown-divider-bg" class="form-control">
    <p id="help-block-@dropdown-divider-bg" class="help-block">Divider color for between dropdown items.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-color">@dropdown-link-color</label>
    <input id="input-@dropdown-link-color" type="text" aria-describedby="help-block-@dropdown-link-color" value="@gray-dark" data-var="@dropdown-link-color" class="form-control">
    <p id="help-block-@dropdown-link-color" class="help-block">Dropdown link text color.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-hover-color">@dropdown-link-hover-color</label>
    <input id="input-@dropdown-link-hover-color" type="text" aria-describedby="help-block-@dropdown-link-hover-color" value="darken(@gray-dark, 5%)" data-var="@dropdown-link-hover-color" class="form-control">
    <p id="help-block-@dropdown-link-hover-color" class="help-block">Hover color for dropdown links.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-hover-bg">@dropdown-link-hover-bg</label>
    <input id="input-@dropdown-link-hover-bg" type="text" aria-describedby="help-block-@dropdown-link-hover-bg" value="#f5f5f5" data-var="@dropdown-link-hover-bg" class="form-control">
    <p id="help-block-@dropdown-link-hover-bg" class="help-block">Hover background for dropdown links.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-active-color">@dropdown-link-active-color</label>
    <input id="input-@dropdown-link-active-color" type="text" aria-describedby="help-block-@dropdown-link-active-color" value="@component-active-color" data-var="@dropdown-link-active-color" class="form-control">
    <p id="help-block-@dropdown-link-active-color" class="help-block">Active dropdown menu item text color.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-active-bg">@dropdown-link-active-bg</label>
    <input id="input-@dropdown-link-active-bg" type="text" aria-describedby="help-block-@dropdown-link-active-bg" value="@component-active-bg" data-var="@dropdown-link-active-bg" class="form-control">
    <p id="help-block-@dropdown-link-active-bg" class="help-block">Active dropdown menu item background color.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@dropdown-link-disabled-color">@dropdown-link-disabled-color</label>
    <input id="input-@dropdown-link-disabled-color" type="text" aria-describedby="help-block-@dropdown-link-disabled-color" value="@gray-light" data-var="@dropdown-link-disabled-color" class="form-control">
    <p id="help-block-@dropdown-link-disabled-color" class="help-block">Disabled dropdown menu item background color.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-header-color">@dropdown-header-color</label>
    <input id="input-@dropdown-header-color" type="text" aria-describedby="help-block-@dropdown-header-color" value="@gray-light" data-var="@dropdown-header-color" class="form-control">
    <p id="help-block-@dropdown-header-color" class="help-block">Text color for headers within dropdown menus.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
    <input id="input-@dropdown-caret-color" type="text" aria-describedby="help-block-@dropdown-caret-color" value="#000" data-var="@dropdown-caret-color" class="form-control">
    <p id="help-block-@dropdown-caret-color" class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
  </div>
</div>
<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@screen-xs">@screen-xs</label>
    <input id="input-@screen-xs" type="text" aria-describedby="help-block-@screen-xs" value="480px" data-var="@screen-xs" class="form-control">
    <p id="help-block-@screen-xs" class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-xs-min">@screen-xs-min</label>
    <input id="input-@screen-xs-min" type="text" aria-describedby="help-block-@screen-xs-min" value="@screen-xs" data-var="@screen-xs-min" class="form-control">
    <p id="help-block-@screen-xs-min" class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-phone">@screen-phone</label>
    <input id="input-@screen-phone" type="text" aria-describedby="help-block-@screen-phone" value="@screen-xs-min" data-var="@screen-phone" class="form-control">
    <p id="help-block-@screen-phone" class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@screen-sm">@screen-sm</label>
    <input id="input-@screen-sm" type="text" aria-describedby="help-block-@screen-sm" value="768px" data-var="@screen-sm" class="form-control">
    <p id="help-block-@screen-sm" class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-sm-min">@screen-sm-min</label>
    <input id="input-@screen-sm-min" type="text" value="@screen-sm" data-var="@screen-sm-min" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-tablet">@screen-tablet</label>
    <input id="input-@screen-tablet" type="text" aria-describedby="help-block-@screen-tablet" value="@screen-sm-min" data-var="@screen-tablet" class="form-control">
    <p id="help-block-@screen-tablet" class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@screen-md">@screen-md</label>
    <input id="input-@screen-md" type="text" aria-describedby="help-block-@screen-md" value="992px" data-var="@screen-md" class="form-control">
    <p id="help-block-@screen-md" class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-md-min">@screen-md-min</label>
    <input id="input-@screen-md-min" type="text" value="@screen-md" data-var="@screen-md-min" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-desktop">@screen-desktop</label>
    <input id="input-@screen-desktop" type="text" aria-describedby="help-block-@screen-desktop" value="@screen-md-min" data-var="@screen-desktop" class="form-control">
    <p id="help-block-@screen-desktop" class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@screen-lg">@screen-lg</label>
    <input id="input-@screen-lg" type="text" aria-describedby="help-block-@screen-lg" value="1200px" data-var="@screen-lg" class="form-control">
    <p id="help-block-@screen-lg" class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-lg-min">@screen-lg-min</label>
    <input id="input-@screen-lg-min" type="text" value="@screen-lg" data-var="@screen-lg-min" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
    <input id="input-@screen-lg-desktop" type="text" aria-describedby="help-block-@screen-lg-desktop" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control">
    <p id="help-block-@screen-lg-desktop" class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@screen-xs-max">@screen-xs-max</label>
    <input id="input-@screen-xs-max" type="text" value="(@screen-sm-min - 1)" data-var="@screen-xs-max" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-sm-max">@screen-sm-max</label>
    <input id="input-@screen-sm-max" type="text" value="(@screen-md-min - 1)" data-var="@screen-sm-max" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@screen-md-max">@screen-md-max</label>
    <input id="input-@screen-md-max" type="text" value="(@screen-lg-min - 1)" data-var="@screen-md-max" class="form-control">
  </div>
</div>
<h2 id="grid-system">Grid system</h2>
<p>Define your custom responsive grid.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@grid-columns">@grid-columns</label>
    <input id="input-@grid-columns" type="text" aria-describedby="help-block-@grid-columns" value="12" data-var="@grid-columns" class="form-control">
    <p id="help-block-@grid-columns" class="help-block">Number of columns in the grid.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@grid-gutter-width">@grid-gutter-width</label>
    <input id="input-@grid-gutter-width" type="text" aria-describedby="help-block-@grid-gutter-width" value="30px" data-var="@grid-gutter-width" class="form-control">
    <p id="help-block-@grid-gutter-width" class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
    <input id="input-@grid-float-breakpoint" type="text" aria-describedby="help-block-@grid-float-breakpoint" value="@screen-sm-min" data-var="@grid-float-breakpoint" class="form-control">
    <p id="help-block-@grid-float-breakpoint" class="help-block">Point at which the navbar becomes uncollapsed.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@grid-float-breakpoint-max">@grid-float-breakpoint-max</label>
    <input id="input-@grid-float-breakpoint-max" type="text" aria-describedby="help-block-@grid-float-breakpoint-max" value="(@grid-float-breakpoint - 1)" data-var="@grid-float-breakpoint-max" class="form-control">
    <p id="help-block-@grid-float-breakpoint-max" class="help-block">Point at which the navbar begins collapsing.</p>
  </div>
</div>
<h2 id="container-sizes">Container sizes</h2>
<p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@container-tablet">@container-tablet</label>
    <input id="input-@container-tablet" type="text" value="(720px + @grid-gutter-width)" data-var="@container-tablet" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@container-sm">@container-sm</label>
    <input id="input-@container-sm" type="text" aria-describedby="help-block-@container-sm" value="@container-tablet" data-var="@container-sm" class="form-control">
    <p id="help-block-@container-sm" class="help-block">For <code>@screen-sm-min</code> and up.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@container-desktop">@container-desktop</label>
    <input id="input-@container-desktop" type="text" value="(940px + @grid-gutter-width)" data-var="@container-desktop" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@container-md">@container-md</label>
    <input id="input-@container-md" type="text" aria-describedby="help-block-@container-md" value="@container-desktop" data-var="@container-md" class="form-control">
    <p id="help-block-@container-md" class="help-block">For <code>@screen-md-min</code> and up.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@container-large-desktop">@container-large-desktop</label>
    <input id="input-@container-large-desktop" type="text" value="(1140px + @grid-gutter-width)" data-var="@container-large-desktop" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@container-lg">@container-lg</label>
    <input id="input-@container-lg" type="text" aria-describedby="help-block-@container-lg" value="@container-large-desktop" data-var="@container-lg" class="form-control">
    <p id="help-block-@container-lg" class="help-block">For <code>@screen-lg-min</code> and up.</p>
  </div>
</div>
<h2 id="navbar">Navbar</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@navbar-height">@navbar-height</label>
    <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-margin-bottom">@navbar-margin-bottom</label>
    <input id="input-@navbar-margin-bottom" type="text" value="@line-height-computed" data-var="@navbar-margin-bottom" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-border-radius">@navbar-border-radius</label>
    <input id="input-@navbar-border-radius" type="text" value="@border-radius-base" data-var="@navbar-border-radius" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label>
    <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
    <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-collapse-max-height">@navbar-collapse-max-height</label>
    <input id="input-@navbar-collapse-max-height" type="text" value="340px" data-var="@navbar-collapse-max-height" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-color">@navbar-default-color</label>
    <input id="input-@navbar-default-color" type="text" value="#777" data-var="@navbar-default-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-bg">@navbar-default-bg</label>
    <input id="input-@navbar-default-bg" type="text" value="#f8f8f8" data-var="@navbar-default-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-border">@navbar-default-border</label>
    <input id="input-@navbar-default-border" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-color">@navbar-default-link-color</label>
    <input id="input-@navbar-default-link-color" type="text" value="#777" data-var="@navbar-default-link-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-hover-color">@navbar-default-link-hover-color</label>
    <input id="input-@navbar-default-link-hover-color" type="text" value="#333" data-var="@navbar-default-link-hover-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-hover-bg">@navbar-default-link-hover-bg</label>
    <input id="input-@navbar-default-link-hover-bg" type="text" value="transparent" data-var="@navbar-default-link-hover-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-active-color">@navbar-default-link-active-color</label>
    <input id="input-@navbar-default-link-active-color" type="text" value="#555" data-var="@navbar-default-link-active-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-active-bg">@navbar-default-link-active-bg</label>
    <input id="input-@navbar-default-link-active-bg" type="text" value="darken(@navbar-default-bg, 6.5%)" data-var="@navbar-default-link-active-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-disabled-color">@navbar-default-link-disabled-color</label>
    <input id="input-@navbar-default-link-disabled-color" type="text" value="#ccc" data-var="@navbar-default-link-disabled-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-link-disabled-bg">@navbar-default-link-disabled-bg</label>
    <input id="input-@navbar-default-link-disabled-bg" type="text" value="transparent" data-var="@navbar-default-link-disabled-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-brand-color">@navbar-default-brand-color</label>
    <input id="input-@navbar-default-brand-color" type="text" value="@navbar-default-link-color" data-var="@navbar-default-brand-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-brand-hover-color">@navbar-default-brand-hover-color</label>
    <input id="input-@navbar-default-brand-hover-color" type="text" value="darken(@navbar-default-brand-color, 10%)" data-var="@navbar-default-brand-hover-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-brand-hover-bg">@navbar-default-brand-hover-bg</label>
    <input id="input-@navbar-default-brand-hover-bg" type="text" value="transparent" data-var="@navbar-default-brand-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-toggle-hover-bg">@navbar-default-toggle-hover-bg</label>
    <input id="input-@navbar-default-toggle-hover-bg" type="text" value="#ddd" data-var="@navbar-default-toggle-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-toggle-icon-bar-bg">@navbar-default-toggle-icon-bar-bg</label>
    <input id="input-@navbar-default-toggle-icon-bar-bg" type="text" value="#888" data-var="@navbar-default-toggle-icon-bar-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-default-toggle-border-color">@navbar-default-toggle-border-color</label>
    <input id="input-@navbar-default-toggle-border-color" type="text" value="#ddd" data-var="@navbar-default-toggle-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-color">@navbar-inverse-color</label>
    <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
    <input id="input-@navbar-inverse-bg" type="text" value="#222" data-var="@navbar-inverse-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-border">@navbar-inverse-border</label>
    <input id="input-@navbar-inverse-border" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-color">@navbar-inverse-link-color</label>
    <input id="input-@navbar-inverse-link-color" type="text" value="lighten(@gray-light, 15%)" data-var="@navbar-inverse-link-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-hover-color">@navbar-inverse-link-hover-color</label>
    <input id="input-@navbar-inverse-link-hover-color" type="text" value="#fff" data-var="@navbar-inverse-link-hover-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-hover-bg">@navbar-inverse-link-hover-bg</label>
    <input id="input-@navbar-inverse-link-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-link-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-active-color">@navbar-inverse-link-active-color</label>
    <input id="input-@navbar-inverse-link-active-color" type="text" value="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-active-bg">@navbar-inverse-link-active-bg</label>
    <input id="input-@navbar-inverse-link-active-bg" type="text" value="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-disabled-color">@navbar-inverse-link-disabled-color</label>
    <input id="input-@navbar-inverse-link-disabled-color" type="text" value="#444" data-var="@navbar-inverse-link-disabled-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-link-disabled-bg">@navbar-inverse-link-disabled-bg</label>
    <input id="input-@navbar-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navbar-inverse-link-disabled-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-brand-color">@navbar-inverse-brand-color</label>
    <input id="input-@navbar-inverse-brand-color" type="text" value="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-brand-hover-color">@navbar-inverse-brand-hover-color</label>
    <input id="input-@navbar-inverse-brand-hover-color" type="text" value="#fff" data-var="@navbar-inverse-brand-hover-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-brand-hover-bg">@navbar-inverse-brand-hover-bg</label>
    <input id="input-@navbar-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navbar-inverse-brand-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-toggle-hover-bg">@navbar-inverse-toggle-hover-bg</label>
    <input id="input-@navbar-inverse-toggle-hover-bg" type="text" value="#333" data-var="@navbar-inverse-toggle-hover-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-toggle-icon-bar-bg">@navbar-inverse-toggle-icon-bar-bg</label>
    <input id="input-@navbar-inverse-toggle-icon-bar-bg" type="text" value="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@navbar-inverse-toggle-border-color">@navbar-inverse-toggle-border-color</label>
    <input id="input-@navbar-inverse-toggle-border-color" type="text" value="#333" data-var="@navbar-inverse-toggle-border-color" class="form-control">
  </div>
</div>
<h2 id="navs">Navs</h2>
<h3 id="shared-nav-styles">Shared nav styles</h3>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@nav-link-padding">@nav-link-padding</label>
    <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-link-hover-bg">@nav-link-hover-bg</label>
    <input id="input-@nav-link-hover-bg" type="text" value="@gray-lighter" data-var="@nav-link-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-disabled-link-color">@nav-disabled-link-color</label>
    <input id="input-@nav-disabled-link-color" type="text" value="@gray-light" data-var="@nav-disabled-link-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@nav-disabled-link-hover-color">@nav-disabled-link-hover-color</label>
    <input id="input-@nav-disabled-link-hover-color" type="text" value="@gray-light" data-var="@nav-disabled-link-hover-color" class="form-control">
  </div>
</div>
<h2 id="tabs">Tabs</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label>
    <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-link-hover-border-color">@nav-tabs-link-hover-border-color</label>
    <input id="input-@nav-tabs-link-hover-border-color" type="text" value="@gray-lighter" data-var="@nav-tabs-link-hover-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-active-link-hover-bg">@nav-tabs-active-link-hover-bg</label>
    <input id="input-@nav-tabs-active-link-hover-bg" type="text" value="@body-bg" data-var="@nav-tabs-active-link-hover-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-active-link-hover-color">@nav-tabs-active-link-hover-color</label>
    <input id="input-@nav-tabs-active-link-hover-color" type="text" value="@gray" data-var="@nav-tabs-active-link-hover-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label>
    <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-justified-link-border-color">@nav-tabs-justified-link-border-color</label>
    <input id="input-@nav-tabs-justified-link-border-color" type="text" value="#ddd" data-var="@nav-tabs-justified-link-border-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@nav-tabs-justified-active-link-border-color">@nav-tabs-justified-active-link-border-color</label>
    <input id="input-@nav-tabs-justified-active-link-border-color" type="text" value="@body-bg" data-var="@nav-tabs-justified-active-link-border-color" class="form-control">
  </div>
</div>
<h2 id="pills">Pills</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@nav-pills-border-radius">@nav-pills-border-radius</label>
    <input id="input-@nav-pills-border-radius" type="text" value="@border-radius-base" data-var="@nav-pills-border-radius" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-pills-active-link-hover-bg">@nav-pills-active-link-hover-bg</label>
    <input id="input-@nav-pills-active-link-hover-bg" type="text" value="@component-active-bg" data-var="@nav-pills-active-link-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@nav-pills-active-link-hover-color">@nav-pills-active-link-hover-color</label>
    <input id="input-@nav-pills-active-link-hover-color" type="text" value="@component-active-color" data-var="@nav-pills-active-link-hover-color" class="form-control">
  </div>
</div>
<h2 id="pagination">Pagination</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@pagination-color">@pagination-color</label>
    <input id="input-@pagination-color" type="text" value="@link-color" data-var="@pagination-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-bg">@pagination-bg</label>
    <input id="input-@pagination-bg" type="text" value="#fff" data-var="@pagination-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-border">@pagination-border</label>
    <input id="input-@pagination-border" type="text" value="#ddd" data-var="@pagination-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pagination-hover-color">@pagination-hover-color</label>
    <input id="input-@pagination-hover-color" type="text" value="@link-hover-color" data-var="@pagination-hover-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-hover-bg">@pagination-hover-bg</label>
    <input id="input-@pagination-hover-bg" type="text" value="@gray-lighter" data-var="@pagination-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-hover-border">@pagination-hover-border</label>
    <input id="input-@pagination-hover-border" type="text" value="#ddd" data-var="@pagination-hover-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pagination-active-color">@pagination-active-color</label>
    <input id="input-@pagination-active-color" type="text" value="#fff" data-var="@pagination-active-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-active-bg">@pagination-active-bg</label>
    <input id="input-@pagination-active-bg" type="text" value="@brand-primary" data-var="@pagination-active-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-active-border">@pagination-active-border</label>
    <input id="input-@pagination-active-border" type="text" value="@brand-primary" data-var="@pagination-active-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pagination-disabled-color">@pagination-disabled-color</label>
    <input id="input-@pagination-disabled-color" type="text" value="@gray-light" data-var="@pagination-disabled-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-disabled-bg">@pagination-disabled-bg</label>
    <input id="input-@pagination-disabled-bg" type="text" value="#fff" data-var="@pagination-disabled-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pagination-disabled-border">@pagination-disabled-border</label>
    <input id="input-@pagination-disabled-border" type="text" value="#ddd" data-var="@pagination-disabled-border" class="form-control">
  </div>
</div>
<h2 id="pager">Pager</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@pager-bg">@pager-bg</label>
    <input id="input-@pager-bg" type="text" value="@pagination-bg" data-var="@pager-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pager-border">@pager-border</label>
    <input id="input-@pager-border" type="text" value="@pagination-border" data-var="@pager-border" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pager-border-radius">@pager-border-radius</label>
    <input id="input-@pager-border-radius" type="text" value="15px" data-var="@pager-border-radius" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pager-hover-bg">@pager-hover-bg</label>
    <input id="input-@pager-hover-bg" type="text" value="@pagination-hover-bg" data-var="@pager-hover-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pager-active-bg">@pager-active-bg</label>
    <input id="input-@pager-active-bg" type="text" value="@pagination-active-bg" data-var="@pager-active-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pager-active-color">@pager-active-color</label>
    <input id="input-@pager-active-color" type="text" value="@pagination-active-color" data-var="@pager-active-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pager-disabled-color">@pager-disabled-color</label>
    <input id="input-@pager-disabled-color" type="text" value="@pagination-disabled-color" data-var="@pager-disabled-color" class="form-control">
  </div>
</div>
<h2 id="jumbotron">Jumbotron</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@jumbotron-padding">@jumbotron-padding</label>
    <input id="input-@jumbotron-padding" type="text" value="30px" data-var="@jumbotron-padding" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@jumbotron-color">@jumbotron-color</label>
    <input id="input-@jumbotron-color" type="text" value="inherit" data-var="@jumbotron-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@jumbotron-bg">@jumbotron-bg</label>
    <input id="input-@jumbotron-bg" type="text" value="@gray-lighter" data-var="@jumbotron-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@jumbotron-heading-color">@jumbotron-heading-color</label>
    <input id="input-@jumbotron-heading-color" type="text" value="inherit" data-var="@jumbotron-heading-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@jumbotron-font-size">@jumbotron-font-size</label>
    <input id="input-@jumbotron-font-size" type="text" value="ceil((@font-size-base * 1.5))" data-var="@jumbotron-font-size" class="form-control">
  </div>
</div>
<h2 id="form-states-and-alerts">Form states and alerts</h2>
<p>Define colors for form feedback states and, by default, alerts.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@state-success-text">@state-success-text</label>
    <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-success-bg">@state-success-bg</label>
    <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-success-border">@state-success-border</label>
    <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@state-info-text">@state-info-text</label>
    <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-info-bg">@state-info-bg</label>
    <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-info-border">@state-info-border</label>
    <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@state-warning-text">@state-warning-text</label>
    <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-warning-bg">@state-warning-bg</label>
    <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-warning-border">@state-warning-border</label>
    <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@state-danger-text">@state-danger-text</label>
    <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-danger-bg">@state-danger-bg</label>
    <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@state-danger-border">@state-danger-border</label>
    <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control">
  </div>
</div>
<h2 id="tooltips">Tooltips</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@tooltip-max-width">@tooltip-max-width</label>
    <input id="input-@tooltip-max-width" type="text" aria-describedby="help-block-@tooltip-max-width" value="200px" data-var="@tooltip-max-width" class="form-control">
    <p id="help-block-@tooltip-max-width" class="help-block">Tooltip max width</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@tooltip-color">@tooltip-color</label>
    <input id="input-@tooltip-color" type="text" aria-describedby="help-block-@tooltip-color" value="#fff" data-var="@tooltip-color" class="form-control">
    <p id="help-block-@tooltip-color" class="help-block">Tooltip text color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@tooltip-bg">@tooltip-bg</label>
    <input id="input-@tooltip-bg" type="text" aria-describedby="help-block-@tooltip-bg" value="#000" data-var="@tooltip-bg" class="form-control">
    <p id="help-block-@tooltip-bg" class="help-block">Tooltip background color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@tooltip-opacity">@tooltip-opacity</label>
    <input id="input-@tooltip-opacity" type="text" value=".9" data-var="@tooltip-opacity" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@tooltip-arrow-width">@tooltip-arrow-width</label>
    <input id="input-@tooltip-arrow-width" type="text" aria-describedby="help-block-@tooltip-arrow-width" value="5px" data-var="@tooltip-arrow-width" class="form-control">
    <p id="help-block-@tooltip-arrow-width" class="help-block">Tooltip arrow width</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@tooltip-arrow-color">@tooltip-arrow-color</label>
    <input id="input-@tooltip-arrow-color" type="text" aria-describedby="help-block-@tooltip-arrow-color" value="@tooltip-bg" data-var="@tooltip-arrow-color" class="form-control">
    <p id="help-block-@tooltip-arrow-color" class="help-block">Tooltip arrow color</p>
  </div>
</div>
<h2 id="popovers">Popovers</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@popover-bg">@popover-bg</label>
    <input id="input-@popover-bg" type="text" aria-describedby="help-block-@popover-bg" value="#fff" data-var="@popover-bg" class="form-control">
    <p id="help-block-@popover-bg" class="help-block">Popover body background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-max-width">@popover-max-width</label>
    <input id="input-@popover-max-width" type="text" aria-describedby="help-block-@popover-max-width" value="276px" data-var="@popover-max-width" class="form-control">
    <p id="help-block-@popover-max-width" class="help-block">Popover maximum width</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-border-color">@popover-border-color</label>
    <input id="input-@popover-border-color" type="text" aria-describedby="help-block-@popover-border-color" value="rgba(0,0,0,.2)" data-var="@popover-border-color" class="form-control">
    <p id="help-block-@popover-border-color" class="help-block">Popover border color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@popover-fallback-border-color">@popover-fallback-border-color</label>
    <input id="input-@popover-fallback-border-color" type="text" aria-describedby="help-block-@popover-fallback-border-color" value="#ccc" data-var="@popover-fallback-border-color" class="form-control">
    <p id="help-block-@popover-fallback-border-color" class="help-block">Popover fallback border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-title-bg">@popover-title-bg</label>
    <input id="input-@popover-title-bg" type="text" aria-describedby="help-block-@popover-title-bg" value="darken(@popover-bg, 3%)" data-var="@popover-title-bg" class="form-control">
    <p id="help-block-@popover-title-bg" class="help-block">Popover title background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-arrow-width">@popover-arrow-width</label>
    <input id="input-@popover-arrow-width" type="text" aria-describedby="help-block-@popover-arrow-width" value="10px" data-var="@popover-arrow-width" class="form-control">
    <p id="help-block-@popover-arrow-width" class="help-block">Popover arrow width</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@popover-arrow-color">@popover-arrow-color</label>
    <input id="input-@popover-arrow-color" type="text" aria-describedby="help-block-@popover-arrow-color" value="@popover-bg" data-var="@popover-arrow-color" class="form-control">
    <p id="help-block-@popover-arrow-color" class="help-block">Popover arrow color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-arrow-outer-width">@popover-arrow-outer-width</label>
    <input id="input-@popover-arrow-outer-width" type="text" aria-describedby="help-block-@popover-arrow-outer-width" value="(@popover-arrow-width + 1)" data-var="@popover-arrow-outer-width" class="form-control">
    <p id="help-block-@popover-arrow-outer-width" class="help-block">Popover outer arrow width</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@popover-arrow-outer-color">@popover-arrow-outer-color</label>
    <input id="input-@popover-arrow-outer-color" type="text" aria-describedby="help-block-@popover-arrow-outer-color" value="fadein(@popover-border-color, 5%)" data-var="@popover-arrow-outer-color" class="form-control">
    <p id="help-block-@popover-arrow-outer-color" class="help-block">Popover outer arrow color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@popover-arrow-outer-fallback-color">@popover-arrow-outer-fallback-color</label>
    <input id="input-@popover-arrow-outer-fallback-color" type="text" aria-describedby="help-block-@popover-arrow-outer-fallback-color" value="darken(@popover-fallback-border-color, 20%)" data-var="@popover-arrow-outer-fallback-color" class="form-control">
    <p id="help-block-@popover-arrow-outer-fallback-color" class="help-block">Popover outer arrow fallback color</p>
  </div>
</div>
<h2 id="labels">Labels</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@label-default-bg">@label-default-bg</label>
    <input id="input-@label-default-bg" type="text" aria-describedby="help-block-@label-default-bg" value="@gray-light" data-var="@label-default-bg" class="form-control">
    <p id="help-block-@label-default-bg" class="help-block">Default label background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@label-primary-bg">@label-primary-bg</label>
    <input id="input-@label-primary-bg" type="text" aria-describedby="help-block-@label-primary-bg" value="@brand-primary" data-var="@label-primary-bg" class="form-control">
    <p id="help-block-@label-primary-bg" class="help-block">Primary label background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@label-success-bg">@label-success-bg</label>
    <input id="input-@label-success-bg" type="text" aria-describedby="help-block-@label-success-bg" value="@brand-success" data-var="@label-success-bg" class="form-control">
    <p id="help-block-@label-success-bg" class="help-block">Success label background color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@label-info-bg">@label-info-bg</label>
    <input id="input-@label-info-bg" type="text" aria-describedby="help-block-@label-info-bg" value="@brand-info" data-var="@label-info-bg" class="form-control">
    <p id="help-block-@label-info-bg" class="help-block">Info label background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@label-warning-bg">@label-warning-bg</label>
    <input id="input-@label-warning-bg" type="text" aria-describedby="help-block-@label-warning-bg" value="@brand-warning" data-var="@label-warning-bg" class="form-control">
    <p id="help-block-@label-warning-bg" class="help-block">Warning label background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@label-danger-bg">@label-danger-bg</label>
    <input id="input-@label-danger-bg" type="text" aria-describedby="help-block-@label-danger-bg" value="@brand-danger" data-var="@label-danger-bg" class="form-control">
    <p id="help-block-@label-danger-bg" class="help-block">Danger label background color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@label-color">@label-color</label>
    <input id="input-@label-color" type="text" aria-describedby="help-block-@label-color" value="#fff" data-var="@label-color" class="form-control">
    <p id="help-block-@label-color" class="help-block">Default label text color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@label-link-hover-color">@label-link-hover-color</label>
    <input id="input-@label-link-hover-color" type="text" aria-describedby="help-block-@label-link-hover-color" value="#fff" data-var="@label-link-hover-color" class="form-control">
    <p id="help-block-@label-link-hover-color" class="help-block">Default text color of a linked label</p>
  </div>
</div>
<h2 id="modals">Modals</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@modal-inner-padding">@modal-inner-padding</label>
    <input id="input-@modal-inner-padding" type="text" aria-describedby="help-block-@modal-inner-padding" value="15px" data-var="@modal-inner-padding" class="form-control">
    <p id="help-block-@modal-inner-padding" class="help-block">Padding applied to the modal body</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-title-padding">@modal-title-padding</label>
    <input id="input-@modal-title-padding" type="text" aria-describedby="help-block-@modal-title-padding" value="15px" data-var="@modal-title-padding" class="form-control">
    <p id="help-block-@modal-title-padding" class="help-block">Padding applied to the modal title</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-title-line-height">@modal-title-line-height</label>
    <input id="input-@modal-title-line-height" type="text" aria-describedby="help-block-@modal-title-line-height" value="@line-height-base" data-var="@modal-title-line-height" class="form-control">
    <p id="help-block-@modal-title-line-height" class="help-block">Modal title line-height</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@modal-content-bg">@modal-content-bg</label>
    <input id="input-@modal-content-bg" type="text" aria-describedby="help-block-@modal-content-bg" value="#fff" data-var="@modal-content-bg" class="form-control">
    <p id="help-block-@modal-content-bg" class="help-block">Background color of modal content area</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-content-border-color">@modal-content-border-color</label>
    <input id="input-@modal-content-border-color" type="text" aria-describedby="help-block-@modal-content-border-color" value="rgba(0,0,0,.2)" data-var="@modal-content-border-color" class="form-control">
    <p id="help-block-@modal-content-border-color" class="help-block">Modal content border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-content-fallback-border-color">@modal-content-fallback-border-color</label>
    <input id="input-@modal-content-fallback-border-color" type="text" aria-describedby="help-block-@modal-content-fallback-border-color" value="#999" data-var="@modal-content-fallback-border-color" class="form-control">
    <p id="help-block-@modal-content-fallback-border-color" class="help-block">Modal content border color <strong>for IE8</strong></p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@modal-backdrop-bg">@modal-backdrop-bg</label>
    <input id="input-@modal-backdrop-bg" type="text" aria-describedby="help-block-@modal-backdrop-bg" value="#000" data-var="@modal-backdrop-bg" class="form-control">
    <p id="help-block-@modal-backdrop-bg" class="help-block">Modal backdrop background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-backdrop-opacity">@modal-backdrop-opacity</label>
    <input id="input-@modal-backdrop-opacity" type="text" aria-describedby="help-block-@modal-backdrop-opacity" value=".5" data-var="@modal-backdrop-opacity" class="form-control">
    <p id="help-block-@modal-backdrop-opacity" class="help-block">Modal backdrop opacity</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-header-border-color">@modal-header-border-color</label>
    <input id="input-@modal-header-border-color" type="text" aria-describedby="help-block-@modal-header-border-color" value="#e5e5e5" data-var="@modal-header-border-color" class="form-control">
    <p id="help-block-@modal-header-border-color" class="help-block">Modal header border color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@modal-footer-border-color">@modal-footer-border-color</label>
    <input id="input-@modal-footer-border-color" type="text" aria-describedby="help-block-@modal-footer-border-color" value="@modal-header-border-color" data-var="@modal-footer-border-color" class="form-control">
    <p id="help-block-@modal-footer-border-color" class="help-block">Modal footer border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-lg">@modal-lg</label>
    <input id="input-@modal-lg" type="text" value="900px" data-var="@modal-lg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@modal-md">@modal-md</label>
    <input id="input-@modal-md" type="text" value="600px" data-var="@modal-md" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@modal-sm">@modal-sm</label>
    <input id="input-@modal-sm" type="text" value="300px" data-var="@modal-sm" class="form-control">
  </div>
</div>
<h2 id="alerts">Alerts</h2>
<p>Define alert colors, border radius, and padding.</p>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@alert-padding">@alert-padding</label>
    <input id="input-@alert-padding" type="text" value="15px" data-var="@alert-padding" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-border-radius">@alert-border-radius</label>
    <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-link-font-weight">@alert-link-font-weight</label>
    <input id="input-@alert-link-font-weight" type="text" value="bold" data-var="@alert-link-font-weight" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@alert-success-bg">@alert-success-bg</label>
    <input id="input-@alert-success-bg" type="text" value="@state-success-bg" data-var="@alert-success-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-success-text">@alert-success-text</label>
    <input id="input-@alert-success-text" type="text" value="@state-success-text" data-var="@alert-success-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-success-border">@alert-success-border</label>
    <input id="input-@alert-success-border" type="text" value="@state-success-border" data-var="@alert-success-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@alert-info-bg">@alert-info-bg</label>
    <input id="input-@alert-info-bg" type="text" value="@state-info-bg" data-var="@alert-info-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-info-text">@alert-info-text</label>
    <input id="input-@alert-info-text" type="text" value="@state-info-text" data-var="@alert-info-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-info-border">@alert-info-border</label>
    <input id="input-@alert-info-border" type="text" value="@state-info-border" data-var="@alert-info-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@alert-warning-bg">@alert-warning-bg</label>
    <input id="input-@alert-warning-bg" type="text" value="@state-warning-bg" data-var="@alert-warning-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-warning-text">@alert-warning-text</label>
    <input id="input-@alert-warning-text" type="text" value="@state-warning-text" data-var="@alert-warning-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-warning-border">@alert-warning-border</label>
    <input id="input-@alert-warning-border" type="text" value="@state-warning-border" data-var="@alert-warning-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@alert-danger-bg">@alert-danger-bg</label>
    <input id="input-@alert-danger-bg" type="text" value="@state-danger-bg" data-var="@alert-danger-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-danger-text">@alert-danger-text</label>
    <input id="input-@alert-danger-text" type="text" value="@state-danger-text" data-var="@alert-danger-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@alert-danger-border">@alert-danger-border</label>
    <input id="input-@alert-danger-border" type="text" value="@state-danger-border" data-var="@alert-danger-border" class="form-control">
  </div>
</div>
<h2 id="progress-bars">Progress bars</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@progress-bg">@progress-bg</label>
    <input id="input-@progress-bg" type="text" aria-describedby="help-block-@progress-bg" value="#f5f5f5" data-var="@progress-bg" class="form-control">
    <p id="help-block-@progress-bg" class="help-block">Background color of the whole progress component</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-color">@progress-bar-color</label>
    <input id="input-@progress-bar-color" type="text" aria-describedby="help-block-@progress-bar-color" value="#fff" data-var="@progress-bar-color" class="form-control">
    <p id="help-block-@progress-bar-color" class="help-block">Progress bar text color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@progress-border-radius">@progress-border-radius</label>
    <input id="input-@progress-border-radius" type="text" aria-describedby="help-block-@progress-border-radius" value="@border-radius-base" data-var="@progress-border-radius" class="form-control">
    <p id="help-block-@progress-border-radius" class="help-block">Variable for setting rounded corners on progress bar.</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-bg">@progress-bar-bg</label>
    <input id="input-@progress-bar-bg" type="text" aria-describedby="help-block-@progress-bar-bg" value="@brand-primary" data-var="@progress-bar-bg" class="form-control">
    <p id="help-block-@progress-bar-bg" class="help-block">Default progress bar color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-success-bg">@progress-bar-success-bg</label>
    <input id="input-@progress-bar-success-bg" type="text" aria-describedby="help-block-@progress-bar-success-bg" value="@brand-success" data-var="@progress-bar-success-bg" class="form-control">
    <p id="help-block-@progress-bar-success-bg" class="help-block">Success progress bar color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-warning-bg">@progress-bar-warning-bg</label>
    <input id="input-@progress-bar-warning-bg" type="text" aria-describedby="help-block-@progress-bar-warning-bg" value="@brand-warning" data-var="@progress-bar-warning-bg" class="form-control">
    <p id="help-block-@progress-bar-warning-bg" class="help-block">Warning progress bar color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-danger-bg">@progress-bar-danger-bg</label>
    <input id="input-@progress-bar-danger-bg" type="text" aria-describedby="help-block-@progress-bar-danger-bg" value="@brand-danger" data-var="@progress-bar-danger-bg" class="form-control">
    <p id="help-block-@progress-bar-danger-bg" class="help-block">Danger progress bar color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@progress-bar-info-bg">@progress-bar-info-bg</label>
    <input id="input-@progress-bar-info-bg" type="text" aria-describedby="help-block-@progress-bar-info-bg" value="@brand-info" data-var="@progress-bar-info-bg" class="form-control">
    <p id="help-block-@progress-bar-info-bg" class="help-block">Info progress bar color</p>
  </div>
</div>
<h2 id="list-group">List group</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@list-group-bg">@list-group-bg</label>
    <input id="input-@list-group-bg" type="text" aria-describedby="help-block-@list-group-bg" value="#fff" data-var="@list-group-bg" class="form-control">
    <p id="help-block-@list-group-bg" class="help-block">Background color on <code>.list-group-item</code></p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-border">@list-group-border</label>
    <input id="input-@list-group-border" type="text" aria-describedby="help-block-@list-group-border" value="#ddd" data-var="@list-group-border" class="form-control">
    <p id="help-block-@list-group-border" class="help-block"><code>.list-group-item</code> border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-border-radius">@list-group-border-radius</label>
    <input id="input-@list-group-border-radius" type="text" aria-describedby="help-block-@list-group-border-radius" value="@border-radius-base" data-var="@list-group-border-radius" class="form-control">
    <p id="help-block-@list-group-border-radius" class="help-block">List group border radius</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@list-group-hover-bg">@list-group-hover-bg</label>
    <input id="input-@list-group-hover-bg" type="text" aria-describedby="help-block-@list-group-hover-bg" value="#f5f5f5" data-var="@list-group-hover-bg" class="form-control">
    <p id="help-block-@list-group-hover-bg" class="help-block">Background color of single list items on hover</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-active-color">@list-group-active-color</label>
    <input id="input-@list-group-active-color" type="text" aria-describedby="help-block-@list-group-active-color" value="@component-active-color" data-var="@list-group-active-color" class="form-control">
    <p id="help-block-@list-group-active-color" class="help-block">Text color of active list items</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-active-bg">@list-group-active-bg</label>
    <input id="input-@list-group-active-bg" type="text" aria-describedby="help-block-@list-group-active-bg" value="@component-active-bg" data-var="@list-group-active-bg" class="form-control">
    <p id="help-block-@list-group-active-bg" class="help-block">Background color of active list items</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@list-group-active-border">@list-group-active-border</label>
    <input id="input-@list-group-active-border" type="text" aria-describedby="help-block-@list-group-active-border" value="@list-group-active-bg" data-var="@list-group-active-border" class="form-control">
    <p id="help-block-@list-group-active-border" class="help-block">Border color of active list elements</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-active-text-color">@list-group-active-text-color</label>
    <input id="input-@list-group-active-text-color" type="text" aria-describedby="help-block-@list-group-active-text-color" value="lighten(@list-group-active-bg, 40%)" data-var="@list-group-active-text-color" class="form-control">
    <p id="help-block-@list-group-active-text-color" class="help-block">Text color for content within active list items</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-disabled-color">@list-group-disabled-color</label>
    <input id="input-@list-group-disabled-color" type="text" aria-describedby="help-block-@list-group-disabled-color" value="@gray-light" data-var="@list-group-disabled-color" class="form-control">
    <p id="help-block-@list-group-disabled-color" class="help-block">Text color of disabled list items</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@list-group-disabled-bg">@list-group-disabled-bg</label>
    <input id="input-@list-group-disabled-bg" type="text" aria-describedby="help-block-@list-group-disabled-bg" value="@gray-lighter" data-var="@list-group-disabled-bg" class="form-control">
    <p id="help-block-@list-group-disabled-bg" class="help-block">Background color of disabled list items</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-disabled-text-color">@list-group-disabled-text-color</label>
    <input id="input-@list-group-disabled-text-color" type="text" aria-describedby="help-block-@list-group-disabled-text-color" value="@list-group-disabled-color" data-var="@list-group-disabled-text-color" class="form-control">
    <p id="help-block-@list-group-disabled-text-color" class="help-block">Text color for content within disabled list items</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-link-color">@list-group-link-color</label>
    <input id="input-@list-group-link-color" type="text" value="#555" data-var="@list-group-link-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@list-group-link-hover-color">@list-group-link-hover-color</label>
    <input id="input-@list-group-link-hover-color" type="text" value="@list-group-link-color" data-var="@list-group-link-hover-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@list-group-link-heading-color">@list-group-link-heading-color</label>
    <input id="input-@list-group-link-heading-color" type="text" value="#333" data-var="@list-group-link-heading-color" class="form-control">
  </div>
</div>
<h2 id="panels">Panels</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@panel-bg">@panel-bg</label>
    <input id="input-@panel-bg" type="text" value="#fff" data-var="@panel-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-body-padding">@panel-body-padding</label>
    <input id="input-@panel-body-padding" type="text" value="15px" data-var="@panel-body-padding" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-heading-padding">@panel-heading-padding</label>
    <input id="input-@panel-heading-padding" type="text" value="10px 15px" data-var="@panel-heading-padding" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-footer-padding">@panel-footer-padding</label>
    <input id="input-@panel-footer-padding" type="text" value="@panel-heading-padding" data-var="@panel-footer-padding" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-border-radius">@panel-border-radius</label>
    <input id="input-@panel-border-radius" type="text" value="@border-radius-base" data-var="@panel-border-radius" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-inner-border">@panel-inner-border</label>
    <input id="input-@panel-inner-border" type="text" aria-describedby="help-block-@panel-inner-border" value="#ddd" data-var="@panel-inner-border" class="form-control">
    <p id="help-block-@panel-inner-border" class="help-block">Border color for elements within panels</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-footer-bg">@panel-footer-bg</label>
    <input id="input-@panel-footer-bg" type="text" value="#f5f5f5" data-var="@panel-footer-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-default-text">@panel-default-text</label>
    <input id="input-@panel-default-text" type="text" value="@gray-dark" data-var="@panel-default-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-default-border">@panel-default-border</label>
    <input id="input-@panel-default-border" type="text" value="#ddd" data-var="@panel-default-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-default-heading-bg">@panel-default-heading-bg</label>
    <input id="input-@panel-default-heading-bg" type="text" value="#f5f5f5" data-var="@panel-default-heading-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-primary-text">@panel-primary-text</label>
    <input id="input-@panel-primary-text" type="text" value="#fff" data-var="@panel-primary-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-primary-border">@panel-primary-border</label>
    <input id="input-@panel-primary-border" type="text" value="@brand-primary" data-var="@panel-primary-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-primary-heading-bg">@panel-primary-heading-bg</label>
    <input id="input-@panel-primary-heading-bg" type="text" value="@brand-primary" data-var="@panel-primary-heading-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-success-text">@panel-success-text</label>
    <input id="input-@panel-success-text" type="text" value="@state-success-text" data-var="@panel-success-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-success-border">@panel-success-border</label>
    <input id="input-@panel-success-border" type="text" value="@state-success-border" data-var="@panel-success-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-success-heading-bg">@panel-success-heading-bg</label>
    <input id="input-@panel-success-heading-bg" type="text" value="@state-success-bg" data-var="@panel-success-heading-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-info-text">@panel-info-text</label>
    <input id="input-@panel-info-text" type="text" value="@state-info-text" data-var="@panel-info-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-info-border">@panel-info-border</label>
    <input id="input-@panel-info-border" type="text" value="@state-info-border" data-var="@panel-info-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-info-heading-bg">@panel-info-heading-bg</label>
    <input id="input-@panel-info-heading-bg" type="text" value="@state-info-bg" data-var="@panel-info-heading-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-warning-text">@panel-warning-text</label>
    <input id="input-@panel-warning-text" type="text" value="@state-warning-text" data-var="@panel-warning-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-warning-border">@panel-warning-border</label>
    <input id="input-@panel-warning-border" type="text" value="@state-warning-border" data-var="@panel-warning-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-warning-heading-bg">@panel-warning-heading-bg</label>
    <input id="input-@panel-warning-heading-bg" type="text" value="@state-warning-bg" data-var="@panel-warning-heading-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-danger-text">@panel-danger-text</label>
    <input id="input-@panel-danger-text" type="text" value="@state-danger-text" data-var="@panel-danger-text" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@panel-danger-border">@panel-danger-border</label>
    <input id="input-@panel-danger-border" type="text" value="@state-danger-border" data-var="@panel-danger-border" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@panel-danger-heading-bg">@panel-danger-heading-bg</label>
    <input id="input-@panel-danger-heading-bg" type="text" value="@state-danger-bg" data-var="@panel-danger-heading-bg" class="form-control">
  </div>
</div>
<h2 id="thumbnails">Thumbnails</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@thumbnail-padding">@thumbnail-padding</label>
    <input id="input-@thumbnail-padding" type="text" aria-describedby="help-block-@thumbnail-padding" value="4px" data-var="@thumbnail-padding" class="form-control">
    <p id="help-block-@thumbnail-padding" class="help-block">Padding around the thumbnail image</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@thumbnail-bg">@thumbnail-bg</label>
    <input id="input-@thumbnail-bg" type="text" aria-describedby="help-block-@thumbnail-bg" value="@body-bg" data-var="@thumbnail-bg" class="form-control">
    <p id="help-block-@thumbnail-bg" class="help-block">Thumbnail background color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@thumbnail-border">@thumbnail-border</label>
    <input id="input-@thumbnail-border" type="text" aria-describedby="help-block-@thumbnail-border" value="#ddd" data-var="@thumbnail-border" class="form-control">
    <p id="help-block-@thumbnail-border" class="help-block">Thumbnail border color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@thumbnail-border-radius">@thumbnail-border-radius</label>
    <input id="input-@thumbnail-border-radius" type="text" aria-describedby="help-block-@thumbnail-border-radius" value="@border-radius-base" data-var="@thumbnail-border-radius" class="form-control">
    <p id="help-block-@thumbnail-border-radius" class="help-block">Thumbnail border radius</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@thumbnail-caption-color">@thumbnail-caption-color</label>
    <input id="input-@thumbnail-caption-color" type="text" aria-describedby="help-block-@thumbnail-caption-color" value="@text-color" data-var="@thumbnail-caption-color" class="form-control">
    <p id="help-block-@thumbnail-caption-color" class="help-block">Custom text color for thumbnail captions</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@thumbnail-caption-padding">@thumbnail-caption-padding</label>
    <input id="input-@thumbnail-caption-padding" type="text" aria-describedby="help-block-@thumbnail-caption-padding" value="9px" data-var="@thumbnail-caption-padding" class="form-control">
    <p id="help-block-@thumbnail-caption-padding" class="help-block">Padding around the thumbnail caption</p>
  </div>
</div>
<h2 id="wells">Wells</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@well-bg">@well-bg</label>
    <input id="input-@well-bg" type="text" value="#f5f5f5" data-var="@well-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@well-border">@well-border</label>
    <input id="input-@well-border" type="text" value="darken(@well-bg, 7%)" data-var="@well-border" class="form-control">
  </div>
</div>
<h2 id="badges">Badges</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@badge-color">@badge-color</label>
    <input id="input-@badge-color" type="text" value="#fff" data-var="@badge-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@badge-link-hover-color">@badge-link-hover-color</label>
    <input id="input-@badge-link-hover-color" type="text" aria-describedby="help-block-@badge-link-hover-color" value="#fff" data-var="@badge-link-hover-color" class="form-control">
    <p id="help-block-@badge-link-hover-color" class="help-block">Linked badge text color on hover</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@badge-bg">@badge-bg</label>
    <input id="input-@badge-bg" type="text" value="@gray-light" data-var="@badge-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@badge-active-color">@badge-active-color</label>
    <input id="input-@badge-active-color" type="text" aria-describedby="help-block-@badge-active-color" value="@link-color" data-var="@badge-active-color" class="form-control">
    <p id="help-block-@badge-active-color" class="help-block">Badge text color in active nav link</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@badge-active-bg">@badge-active-bg</label>
    <input id="input-@badge-active-bg" type="text" aria-describedby="help-block-@badge-active-bg" value="#fff" data-var="@badge-active-bg" class="form-control">
    <p id="help-block-@badge-active-bg" class="help-block">Badge background color in active nav link</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@badge-font-weight">@badge-font-weight</label>
    <input id="input-@badge-font-weight" type="text" value="bold" data-var="@badge-font-weight" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@badge-line-height">@badge-line-height</label>
    <input id="input-@badge-line-height" type="text" value="1" data-var="@badge-line-height" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@badge-border-radius">@badge-border-radius</label>
    <input id="input-@badge-border-radius" type="text" value="10px" data-var="@badge-border-radius" class="form-control">
  </div>
</div>
<h2 id="breadcrumbs">Breadcrumbs</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@breadcrumb-padding-vertical">@breadcrumb-padding-vertical</label>
    <input id="input-@breadcrumb-padding-vertical" type="text" value="8px" data-var="@breadcrumb-padding-vertical" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@breadcrumb-padding-horizontal">@breadcrumb-padding-horizontal</label>
    <input id="input-@breadcrumb-padding-horizontal" type="text" value="15px" data-var="@breadcrumb-padding-horizontal" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@breadcrumb-bg">@breadcrumb-bg</label>
    <input id="input-@breadcrumb-bg" type="text" aria-describedby="help-block-@breadcrumb-bg" value="#f5f5f5" data-var="@breadcrumb-bg" class="form-control">
    <p id="help-block-@breadcrumb-bg" class="help-block">Breadcrumb background color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@breadcrumb-color">@breadcrumb-color</label>
    <input id="input-@breadcrumb-color" type="text" aria-describedby="help-block-@breadcrumb-color" value="#ccc" data-var="@breadcrumb-color" class="form-control">
    <p id="help-block-@breadcrumb-color" class="help-block">Breadcrumb text color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@breadcrumb-active-color">@breadcrumb-active-color</label>
    <input id="input-@breadcrumb-active-color" type="text" aria-describedby="help-block-@breadcrumb-active-color" value="@gray-light" data-var="@breadcrumb-active-color" class="form-control">
    <p id="help-block-@breadcrumb-active-color" class="help-block">Text color of current page in the breadcrumb</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@breadcrumb-separator">@breadcrumb-separator</label>
    <input id="input-@breadcrumb-separator" type="text" aria-describedby="help-block-@breadcrumb-separator" value="&quot;/&quot;" data-var="@breadcrumb-separator" class="form-control">
    <p id="help-block-@breadcrumb-separator" class="help-block">Textual separator for between breadcrumb elements</p>
  </div>
</div>
<h2 id="carousel">Carousel</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@carousel-text-shadow">@carousel-text-shadow</label>
    <input id="input-@carousel-text-shadow" type="text" value="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@carousel-control-color">@carousel-control-color</label>
    <input id="input-@carousel-control-color" type="text" value="#fff" data-var="@carousel-control-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@carousel-control-width">@carousel-control-width</label>
    <input id="input-@carousel-control-width" type="text" value="15%" data-var="@carousel-control-width" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@carousel-control-opacity">@carousel-control-opacity</label>
    <input id="input-@carousel-control-opacity" type="text" value=".5" data-var="@carousel-control-opacity" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@carousel-control-font-size">@carousel-control-font-size</label>
    <input id="input-@carousel-control-font-size" type="text" value="20px" data-var="@carousel-control-font-size" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@carousel-indicator-active-bg">@carousel-indicator-active-bg</label>
    <input id="input-@carousel-indicator-active-bg" type="text" value="#fff" data-var="@carousel-indicator-active-bg" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@carousel-indicator-border-color">@carousel-indicator-border-color</label>
    <input id="input-@carousel-indicator-border-color" type="text" value="#fff" data-var="@carousel-indicator-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@carousel-caption-color">@carousel-caption-color</label>
    <input id="input-@carousel-caption-color" type="text" value="#fff" data-var="@carousel-caption-color" class="form-control">
  </div>
</div>
<h2 id="close">Close</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@close-font-weight">@close-font-weight</label>
    <input id="input-@close-font-weight" type="text" value="bold" data-var="@close-font-weight" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@close-color">@close-color</label>
    <input id="input-@close-color" type="text" value="#000" data-var="@close-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@close-text-shadow">@close-text-shadow</label>
    <input id="input-@close-text-shadow" type="text" value="0 1px 0 #fff" data-var="@close-text-shadow" class="form-control">
  </div>
</div>
<h2 id="code">Code</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@code-color">@code-color</label>
    <input id="input-@code-color" type="text" value="#c7254e" data-var="@code-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@code-bg">@code-bg</label>
    <input id="input-@code-bg" type="text" value="#f9f2f4" data-var="@code-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@kbd-color">@kbd-color</label>
    <input id="input-@kbd-color" type="text" value="#fff" data-var="@kbd-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@kbd-bg">@kbd-bg</label>
    <input id="input-@kbd-bg" type="text" value="#333" data-var="@kbd-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pre-bg">@pre-bg</label>
    <input id="input-@pre-bg" type="text" value="#f5f5f5" data-var="@pre-bg" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pre-color">@pre-color</label>
    <input id="input-@pre-color" type="text" value="@gray-dark" data-var="@pre-color" class="form-control">
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@pre-border-color">@pre-border-color</label>
    <input id="input-@pre-border-color" type="text" value="#ccc" data-var="@pre-border-color" class="form-control">
  </div>
  <div class="col-xs-4">
    <label for="input-@pre-scrollable-max-height">@pre-scrollable-max-height</label>
    <input id="input-@pre-scrollable-max-height" type="text" value="340px" data-var="@pre-scrollable-max-height" class="form-control">
  </div>
</div>
<h2 id="type">Type</h2>
<div class="row">
  <div class="col-xs-4">
    <label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
    <input id="input-@component-offset-horizontal" type="text" aria-describedby="help-block-@component-offset-horizontal" value="180px" data-var="@component-offset-horizontal" class="form-control">
    <p id="help-block-@component-offset-horizontal" class="help-block">Horizontal offset for forms and lists.</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@text-muted">@text-muted</label>
    <input id="input-@text-muted" type="text" aria-describedby="help-block-@text-muted" value="@gray-light" data-var="@text-muted" class="form-control">
    <p id="help-block-@text-muted" class="help-block">Text muted color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@abbr-border-color">@abbr-border-color</label>
    <input id="input-@abbr-border-color" type="text" aria-describedby="help-block-@abbr-border-color" value="@gray-light" data-var="@abbr-border-color" class="form-control">
    <p id="help-block-@abbr-border-color" class="help-block">Abbreviations and acronyms border color</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@headings-small-color">@headings-small-color</label>
    <input id="input-@headings-small-color" type="text" aria-describedby="help-block-@headings-small-color" value="@gray-light" data-var="@headings-small-color" class="form-control">
    <p id="help-block-@headings-small-color" class="help-block">Headings small color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@blockquote-small-color">@blockquote-small-color</label>
    <input id="input-@blockquote-small-color" type="text" aria-describedby="help-block-@blockquote-small-color" value="@gray-light" data-var="@blockquote-small-color" class="form-control">
    <p id="help-block-@blockquote-small-color" class="help-block">Blockquote small color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@blockquote-font-size">@blockquote-font-size</label>
    <input id="input-@blockquote-font-size" type="text" aria-describedby="help-block-@blockquote-font-size" value="(@font-size-base * 1.25)" data-var="@blockquote-font-size" class="form-control">
    <p id="help-block-@blockquote-font-size" class="help-block">Blockquote font size</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@blockquote-border-color">@blockquote-border-color</label>
    <input id="input-@blockquote-border-color" type="text" aria-describedby="help-block-@blockquote-border-color" value="@gray-lighter" data-var="@blockquote-border-color" class="form-control">
    <p id="help-block-@blockquote-border-color" class="help-block">Blockquote border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@page-header-border-color">@page-header-border-color</label>
    <input id="input-@page-header-border-color" type="text" aria-describedby="help-block-@page-header-border-color" value="@gray-lighter" data-var="@page-header-border-color" class="form-control">
    <p id="help-block-@page-header-border-color" class="help-block">Page header border color</p>
  </div>
  <div class="col-xs-4">
    <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
    <input id="input-@dl-horizontal-offset" type="text" aria-describedby="help-block-@dl-horizontal-offset" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control">
    <p id="help-block-@dl-horizontal-offset" class="help-block">Width of horizontal description list titles</p>
  </div>
  <div class="clearfix"></div>
  <div class="col-xs-4">
    <label for="input-@hr-border">@hr-border</label>
    <input id="input-@hr-border" type="text" aria-describedby="help-block-@hr-border" value="@gray-lighter" data-var="@hr-border" class="form-control">
    <p id="help-block-@hr-border" class="help-block">Horizontal line color.</p>
  </div>
</div>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
  </div>



  <div class="bs-docs-section">
    <h1 id="download" class="page-header">下载</h1>

    <p class="lead">庆祝一下！你的定制版 Bootstrap 即将大功告成。只要点击下面的按钮就可以下载了。</p>
    <div id="firefox-customizer-alert" class="alert alert-warning alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4>Warning for Firefox users!</h4>
      <p>Due to a possible browser bug, the customizer download randomly fails in Firefox. If this happens to you, we advise either retrying in Firefox or using one of the other browsers supported by the Customizer (Chrome or IE10+).</p>
    </div>
    <div class="bs-customize-download">
      <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="ga(&#39;send&#39;, &#39;event&#39;, &#39;Customize&#39;, &#39;Download&#39;, &#39;Customize and Download&#39;);">编译并下载</button>
    </div>
  </div><!-- /download -->
</form>

        </div>
        
        <div class="col-md-3" role="complementary">
          <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
            <ul class="nav bs-docs-sidenav">
              
                
<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
<li><a href="http://v3.bootcss.com/customize/#import-drop-target">Import</a></li>
<li><a href="http://v3.bootcss.com/customize/#less">Less components</a></li>
<li><a href="http://v3.bootcss.com/customize/#plugins">jQuery plugins</a></li>
<li><a href="http://v3.bootcss.com/customize/#less-variables">Less variables</a>
  <ul class="nav">
    <li><a href="http://v3.bootcss.com/customize/#colors">Colors</a></li>
    <li><a href="http://v3.bootcss.com/customize/#scaffolding">Scaffolding</a></li>
    <li><a href="http://v3.bootcss.com/customize/#typography">Typography</a></li>
    <li><a href="http://v3.bootcss.com/customize/#iconography">Iconography</a></li>
    <li><a href="http://v3.bootcss.com/customize/#components">Components</a></li>
    <li><a href="http://v3.bootcss.com/customize/#tables">Tables</a></li>
    <li><a href="http://v3.bootcss.com/customize/#buttons">Buttons</a></li>
    <li><a href="http://v3.bootcss.com/customize/#forms">Forms</a></li>
    <li><a href="http://v3.bootcss.com/customize/#dropdowns">Dropdowns</a></li>
    <li><a href="http://v3.bootcss.com/customize/#media-queries-breakpoints">Media queries breakpoints</a></li>
    <li><a href="http://v3.bootcss.com/customize/#grid-system">Grid system</a></li>
    <li><a href="http://v3.bootcss.com/customize/#container-sizes">Container sizes</a></li>
    <li><a href="http://v3.bootcss.com/customize/#navbar">Navbar</a></li>
    <li><a href="http://v3.bootcss.com/customize/#navs">Navs</a></li>
    <li><a href="http://v3.bootcss.com/customize/#tabs">Tabs</a></li>
    <li><a href="http://v3.bootcss.com/customize/#pills">Pills</a></li>
    <li><a href="http://v3.bootcss.com/customize/#pagination">Pagination</a></li>
    <li><a href="http://v3.bootcss.com/customize/#pager">Pager</a></li>
    <li><a href="http://v3.bootcss.com/customize/#jumbotron">Jumbotron</a></li>
    <li><a href="http://v3.bootcss.com/customize/#form-states-and-alerts">Form states and alerts</a></li>
    <li><a href="http://v3.bootcss.com/customize/#tooltips">Tooltips</a></li>
    <li><a href="http://v3.bootcss.com/customize/#popovers">Popovers</a></li>
    <li><a href="http://v3.bootcss.com/customize/#labels">Labels</a></li>
    <li><a href="http://v3.bootcss.com/customize/#modals">Modals</a></li>
    <li><a href="http://v3.bootcss.com/customize/#alerts">Alerts</a></li>
    <li><a href="http://v3.bootcss.com/customize/#progress-bars">Progress bars</a></li>
    <li><a href="http://v3.bootcss.com/customize/#list-group">List group</a></li>
    <li><a href="http://v3.bootcss.com/customize/#panels">Panels</a></li>
    <li><a href="http://v3.bootcss.com/customize/#thumbnails">Thumbnails</a></li>
    <li><a href="http://v3.bootcss.com/customize/#wells">Wells</a></li>
    <li><a href="http://v3.bootcss.com/customize/#badges">Badges</a></li>
    <li><a href="http://v3.bootcss.com/customize/#breadcrumbs">Breadcrumbs</a></li>
    <li><a href="http://v3.bootcss.com/customize/#carousel">Carousel</a></li>
    <li><a href="http://v3.bootcss.com/customize/#close">Close</a></li>
    <li><a href="http://v3.bootcss.com/customize/#code">Code</a></li>
    <li><a href="http://v3.bootcss.com/customize/#type">Type</a></li>
  </ul>
</li>
<li><a href="http://v3.bootcss.com/customize/#download">Download</a></li>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
              
            </ul>
            <a class="back-to-top" href="http://v3.bootcss.com/customize/#top">
              返回顶部
            </a>
            
          </nav>
        </div>
        
      </div>
    </div>

    <!-- Footer
================================================== -->
<footer class="bs-docs-footer" role="contentinfo">
  <div class="container">

    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
    <p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
    <p>本项目源码受 <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a> 开源协议保护，文档受 <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a> 开源协议保护。</p>
    <ul class="bs-docs-footer-links text-muted">
      <li>当前版本： v3.3.2</li>
      <li>·</li>
      <li><a href="https://github.com/twbs/bootstrap">GitHub 仓库</a></li>
      <li>·</li>
      <li><a href="http://v3.bootcss.com/getting-started/#examples">实例精选</a></li>
      <li>·</li>
      <li><a href="http://v2.bootcss.com/">v2.3.2 中文文档</a></li>
      <li>·</li>
      <li><a href="http://v3.bootcss.com/about/">关于</a></li>
      <li>·</li>
      <li><a href="http://expo.bootcss.com/">优站精选</a></li>
      <li>·</li>
      <li><a href="http://blog.getbootstrap.com/">官方博客</a></li>
      <li>·</li>
      <li><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
      <li>·</li>
      <li><a href="https://github.com/twbs/bootstrap/releases">历史版本</a></li>
    </ul>
  </div>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/jquery.min.js"></script>


  <script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/bootstrap.min.js"></script>



  <script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/docs.min.js"></script>



  <script>var __configBridge = {"autoprefixerBrowsers":["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"],"jqueryCheck":["if (typeof jQuery === 'undefined') {","  throw new Error('Bootstrap\\'s JavaScript requires jQuery')","}\n"],"jqueryVersionCheck":["+function ($) {","  'use strict';","  var version = $.fn.jquery.split(' ')[0].split('.')","  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1)) {","    throw new Error('Bootstrap\\'s JavaScript requires jQuery version 1.9.1 or higher')","  }","}(jQuery);\n\n"]}</script>
  
    <script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/customize.min.js"></script>
  


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/ie10-viewport-bug-workaround.js"></script>



<!-- Analytics
================================================== -->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fbdb993b828cbe079a7fbc1a951f44726' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/h.js" type="text/javascript"></script>

<!-- 全局统计代码 -->
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F079fac161efc4b2a6f31e80064f14e82' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./定制并下载 Bootstrap · Bootstrap 中文文档_files/h(1).js" type="text/javascript"></script>
  

<div id="global-zeroclipboard-html-bridge" class="global-zeroclipboard-container" style="position: absolute; left: 0px; top: -9999px; width: 15px; height: 15px; z-index: 999999999;" title="" data-original-title="复制到剪贴板">      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">         <param name="movie" value="/assets/flash/ZeroClipboard.swf?noCache=1426855946591">         <param name="allowScriptAccess" value="sameDomain">         <param name="scale" value="exactfit">         <param name="loop" value="false">         <param name="menu" value="false">         <param name="quality" value="best">         <param name="bgcolor" value="#ffffff">         <param name="wmode" value="transparent">         <param name="flashvars" value="trustedOrigins=v3.bootcss.com%2C%2F%2Fv3.bootcss.com%2Chttp%3A%2F%2Fv3.bootcss.com">         <embed src="/assets/flash/ZeroClipboard.swf?noCache=1426855946591" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="100%" height="100%" name="global-zeroclipboard-flash-bridge" allowscriptaccess="sameDomain" allowfullscreen="false" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="trustedOrigins=v3.bootcss.com%2C%2F%2Fv3.bootcss.com%2Chttp%3A%2F%2Fv3.bootcss.com" scale="exactfit">                </object></div></body></html>